<template>
  <div class="app-container">
      <SearchBar :search="searchParams" @on-search="search">
         <el-form :model="searchParams" inline class="search-form-inline">
             <el-row>
                <el-col :span="12">
                <el-form-item label="公司名称">
                  <el-input v-model="searchParams.logisticsCompanyName" placeholder="公司名称" clearable></el-input>
                </el-form-item>
               </el-col>
                <el-col :span="12">
                <el-form-item label="联系人">
                  <el-input v-model="searchParams.contactsName" placeholder="联系人" clearable></el-input>
                </el-form-item>
               </el-col>
             </el-row>
         </el-form>
    </SearchBar>
    <div>
       <el-button type="success" @click="toCreate" icon="wp wp-icon-save">新增物流公司</el-button>
    </div>
      <page-table
         ref="page"
        :WP_CurrentPage="currentPage"
        :WP_PageSize="pageSize"
        :WP_List="list"
        :WP_TotalRow="totalRow"
        highlightCurrentRow
        :WP_Loading="loading">
          <el-table-column label="公司编号" prop="logisticsCompanyCode">
          </el-table-column>
          <el-table-column  label="公司名称"  prop="logisticsCompanyName" show-overflow-tooltip>
          </el-table-column>
          <el-table-column label="公司电话" prop="telephone"></el-table-column>
          <el-table-column label="联系人" prop="contactsName"></el-table-column>
          <el-table-column label="联系人手机" prop="contactsMobile"></el-table-column>
          <el-table-column label="操作" align="center" width="160">
              <template slot-scope="scope">
                  <el-button @click="toEdit(scope.row)" type="warning" size="mini">编 辑</el-button>
                  <el-button @click="toDelete(scope.row)" type="danger" size="mini">删 除</el-button>
              </template>
          </el-table-column>
        </page-table>
        <el-dialog width="35%" :title="title" :visible.sync="visible">
                <el-form :model="logisticsCompany" ref="logisticsCompanyRef" label-width="100px" :rules="rules">
                <el-row>
                      <el-col :span="12">
                        <el-form-item label="公司名称" prop="logisticsCompanyName">
                            <el-input class="wp-form-280" v-model="logisticsCompany.logisticsCompanyName" placeholder="公司名称"></el-input>
                        </el-form-item>
                      </el-col>
                </el-row>
                <el-row>
                      <el-col :span="12">
                        <el-form-item label="公司电话">
                            <el-input class="wp-form-280" v-model="logisticsCompany.telephone" placeholder="公司电话"></el-input>
                        </el-form-item>
                      </el-col>
                </el-row>
                 <el-row>
                    <el-col :span="12">
                        <el-form-item label="联系人">
                            <el-input class="wp-form-280" v-model="logisticsCompany.contactsName" placeholder="联系人"></el-input>
                        </el-form-item>
                    </el-col>
                 </el-row>
                <el-row>
                  <el-col :span="12">
                    <el-form-item label="联系人手机">
                        <el-input class="wp-form-280" v-model="logisticsCompany.contactsMobile" placeholder="联系人手机"></el-input>
                    </el-form-item>
                  </el-col>
                </el-row>
                </el-form>
                <div style="margin-top:10px;text-align:center;">
                    <el-button type="" @click="visible=false">取 消</el-button>
                    <el-button type="success" @click="save">保 存</el-button>
                </div>
        </el-dialog>
  </div>
</template>
<script>
import SearchBar from '@/components/SearchBar'
import PageTable from '@/components/PageTable'
import Mixins from './mixins'
export default {
  mixins: [Mixins],
  components: {SearchBar, PageTable},
  data () {
    return {
      id: 'logistics',
      visible: false,
      title: '',
      logisticsCompany: {},
      rules: {
        logisticsCompanyName: [{required: true, message: '不能为空', trigger: 'blur'}]
      }
    }
  },
  mounted () {
    this.search()
  },
  methods: {
    toCreate () {
      this.visible = true
      this.title = '新增物流公司'
      this.logisticsCompany = {}
    },
    toEdit (row) {
      this.visible = true
      this.title = '编辑物流公司'
      this.logisticsCompany = {...row}
    },
    toDelete (row) {
      this.$msgBox.confirm('确认删除物流公司【' + row.logisticsCompanyName + '】', () => {
        this.requestOption('deleteLogisticsCompany', row.logisticsCompanyCode, res => {
          if (res.code === 0) {
            this.search()
          }
        })
      })
    },
    save () {
      this.$refs.logisticsCompanyRef.validate(validte => {
        if (validte) {
          let opt = 'addLogisticsCompany'
          if (this.logisticsCompany && this.logisticsCompany.logisticsCompanyCode) {
            opt = 'updateLogisticsCompany'
          }
          this.requestOption(opt, this.logisticsCompany, res => {
            if (res.code === 0) {
              this.visible = false
              this.search()
            }
          })
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
</style>
